<template>
    <div class="task-box" v-bind:class="{disable:info.tag === 'done'}">
        <div class="task-tag">
            <tag v-bind:type="info.tag" />
        </div>
        <div class="task-title">{{info.title}}</div>
        <div class="task-info">
            <div class="task-date">{{info.dueDate}}</div>
            <div class="task-owner">
                <user-name v-bind:name="info.owner" mode="small" />
            </div>
        </div>
    </div>
</template>

<script>
    import tag from './tag'
    import UserName from './UserName'
    export default {
        name: 'task',
        components: { tag, UserName },
        props: {
            info: {
                type: Object,
                required: true,
            }
        }
    }

</script>

<style scoped>
    .task-box {
        margin-bottom: 10px;
        background: white;
        border: 1px solid rgb(231, 231, 231);
        border-radius: 5px;
        padding: 10px;
    }

    .task-title {
        font-size: 12px;
        font-weight: bold;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .task-info {
        display: flex;
        justify-content: space-between;
    }

    .task-date {
        padding: 1px 10px;
        border: 1px solid rgb(215, 215, 215);
        font-size: 12px;
        box-sizing: border-box;
        border-radius: 40px;
        display: inline-block;
        color: gray;
        background: rgb(231, 231, 231)
    }

    .task-owner {
        font-size: 12px;
        float: right;
        text-align: center;
        height: 12px;
    }

    .task-box.disable {
        opacity: 0.7;
    }

    /* .clearfix:after{
        content: '';
        display: both;
    } */
</style>